<template>
    <div>
      <!-- 添加按钮-->
       <!-- 搜索框隐藏 Search.vue -->
       <Search
        @click="
        model={};
        $refs.d.show();
        ">
         添加角色
       </Search>
       <!-- 表格 -->
       <MyTable 
       :tp="{ hasChildren: 'hasChildren', children: 'abc' }" 
       :loading="queryLoading" 
       :data="list" 
       :cols="cols">
       <!-- 按钮 -->
            <template v-slot:action="{ row }">
                <el-button 
                size="mini" 
                type="primary" 
                icon="el-icon-edit"
                 @click="
                 model={...row};
                 $refs.d.show()
                 ">
                 编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="delRole(row)">删除</el-button>
                <el-button 
                size="mini" 
                type="warning"
                icon="el-icon-s-tools"
                @click="
                model={...row};
                getMenus();
                ">分配权限</el-button>
            </template>
       </MyTable>
       <!--添加修改模态框  -->
       <DF 
       :title="title+'角色'"
        lw="100px" 
        :opts="opts" 
        v-model="model" 
        @confirm="confirm"
        ref="d"
        ></DF>
        <!-- 分配权限模态框 -->
        <MyDialog title="分配权限" ref="dia" @confirm="updataRights">
               <el-tree
               :default-checked-keys="keys"
               ref="tree"
               :data="menus"
                :props="{label:'authName',children:'children'}"
                node-key="id"
                default-expand-all
                show-checkbox>
              </el-tree>
        </MyDialog>
    </div>
</template>

<script>
import {assignRights,getMenuTree,deleteRole, getRoles ,modifyRole,addRole} from 'api/rights'

    export default {
        name:"roles",
        data() {
            return {
              /**
               * 表单配置项
               */
              opts:{
                roleName:{
                  title:"角色名称",
                  required:true,
                  max:20,
                },
                roleDesc:{
                  title:"角色描述",
                  required:true,
                  max:50,
                },
              },
              /**
               * 添加修改模型
               */
              model:{},
                /**
                 * 列
                 */
                cols:[
                  {
                    title:'',
                    type:"expand",
                  },
                  {
                    title:'#',
                    type:'index'
                  },
                  {
                    title:'角色名称',
                    name:'roleName'
                  },
                  {
                    title:'角色描述',
                    name:'roleDesc'
                  },
                  {
                    title:'操作',
                    slot: "action",
                    align: "center",
                    width: 290,
                  },
                ],
                /**
                 * 菜单列表
                 */
                menus:[],
                /**
                 * 默认选中的节点数组
                 */
                keys:[],
            }
        },
        created () {
            this.getRolesList();
        },
        methods: {
          /**
           * 修改权限
           */
          async updataRights(){
            const d=this.$refs.dia;
            try {
               const tree=this.$refs.tree;
              //  获取选中keys值
               const keys=[...tree.getCheckedKeys(),...tree.getHalfCheckedKeys()];
               d.start();
               await assignRights(this.model.id,keys.join(","));
               this.getRolesList()
               this.$m.success('权限分配成功');
               d.hide();
            } catch (error) {
              console.log(error);
            }
            d.stop();
          },
          /**
           * 获取菜单列表
           */
          async getMenus(){
             try {
              this.queryLoading=true;
              this.menus=await getMenuTree();
              this.$refs.dia.show();
               //keys清空
               this.keys.splice(0,Infinity);
               //默认选中已选
               const deep=(children)=>{
                for (const child of children) {
                   if(child.children){
                      deep(child.children);
                   }else{
                      this.keys.push(child.id);
                   }
                 }
               };
               deep(this.model.children);
             } catch (error) {}
             this.queryLoading=false;
          },
          /**
           * 删除角色
           */
           async delRole({id,roleName}){
             let res;
             try {
              res=await this.$myConfirm(`你确定要删除【${roleName}】吗？`);
              await deleteRole(id);
              this.$m.success('删除成功');
              this.getRolesList();
             } catch (error) {}
             res&&res();
           },
          /**
           * 提交
           */
          async confirm(){
            const d=this.$refs.d
             try {
               d.start();
               await (this.model.id?modifyRole:addRole)(this.model);
               this.$m.success(this.title+'角色成功');
               d.hide();
               this.getRolesList()
             } catch (error) {
              console.log(error);
             }
             d.stop();
          },
          /**
           * 获取角色列表
           */
           async getRolesList() {
                try {
                  this.queryLoading=true;
                    this.list=await getRoles();
                } catch (error) {}
                  this.queryLoading=false;
            }
        },
        computed: {
          title() {
            return this.model.id?'修改':'添加';
          }
        },
    }
</script>

<style scoped>

</style>